<template>
  <div class="listOder">
    <section id="header">
      <HeaderPublc></HeaderPublc>
    </section>
    <section id="cent">
      <div class="top">
      </div>
      <div class="center">
        <div class="saech" style="width: 680px" v-show="!showSaech">
          <!--搜索框-->
          <input class="saechIput"  v-model="input" :placeholder="languageData.public.sechText"></input>
          <el-button type="primary" class="saechBout" style="border-radius: 4px;"  icon="el-icon-search" v-on:click="saechFn()"> </el-button>
          <!-- 搜索 高级查询-->
          <el-button type="primary" class="saechBoutH"  @click="showSaech = !showSaech"> {{languageData.public.AdvancedSearch}}</el-button>
        </div>
        <!--- 高级搜索-->
        <div class="saech clearfix sea" v-show="showSaech" style="">
          <div class="saechl" >
            <el-date-picker v-model="form.startDate" style="width:250px;" type="daterange" :range-separator="languageData.id=='Chinese'?'至':'to'" :start-placeholder="languageData.public.creaedTime" :end-placeholder="languageData.public.completionTime">
            </el-date-picker>
            <el-select v-model="form.transportType" multiple  :placeholder="languageData.public.modeOfTransport" style="width:300px;">
              <el-option v-for="item in transportTypelist" :key="item.value" :label="languageData.id=='Chinese'?item.label:item.label2" :value="item.value">
              </el-option>
            </el-select>
            <!-- 运输状态-->
            <el-select v-model="form.transportStatus" :placeholder="languageData.public.status" style="width: 120px;">
              <el-option
                v-for="item in transportStatuslist"
                :key="item.value"
                :label="languageData.id=='Chinese'?item.label:item.label2"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="saechl"  style="width: 690px;margin: auto">
            <div class="left" >
              <el-popover ref="popover4" v-model="visible1" placement="bottom" width="376" trigger="focus" :cityList="cityList" >
                <div class="listCity">
                <p style="line-height: 25px" v-for="list in  listCity" v-on:click="clickgetcity(list,1)"><span>{{list.countryCN}} </span><span>{{list.stationCN}}({{list.code}}) </span><span> {{list.stationEN}}</span> <span></span><span>{{list.abbreviation}} </span></p>
                </div>
              </el-popover>
              <div class=" "  >
                <input type="text" AUTOCOMPLETE="OFF" class="popover" placeholder="起运地" v-model="form.startPosition" v-popover:popover4   @keyup="changeFn(form.startPosition,1)" @focus="listCity=[]"/>
              </div>
            </div>
            <div class="left" >
              <el-popover ref="popover3" v-model="visible2" placement="bottom" width="376" trigger="focus" :cityList="cityList" >
                <div class="listCity">
                  <p style="line-height: 25px" v-for="list in  listCity" v-on:click="clickgetcity(list,2)"><span>{{list.countryCN}} </span><span>{{list.stationCN}}({{list.code}}) </span><span> {{list.stationEN}}</span> <span></span><span>{{list.abbreviation}} </span></p>
                </div>
                </el-popover>
              <div class=" "  >
                <input type="text" AUTOCOMPLETE="OFF" class="popover" placeholder="目的地" v-model="form.endPosition" v-popover:popover3   @keyup="changeFn(form.endPosition,2)" @focus="listCity=[]"/>
              </div>
            </div>
            <div class="left" >
              <el-button type="primary" class="saechBout"  icon="el-icon-search" style=" border-radius:0px; margin-left: 10px" v-on:click="sechH()"> </el-button>
              <!-- 搜索 基础查询-->
              <el-button type="primary" class="saechBoutH" style="margin-left: 0px;" @click="sechC()"> {{languageData.public.search}}</el-button>
            </div>
            <div class="cleae"></div>
          </div>
          <div class="cleae" ></div>
        </div>
        <!-- 列表-->
        <div class="cardBox clearfix"  :transport="transport"  v-loading="loading" element-loading-text="loading..." element-loading-spinner="el-icon-loading" element-loading-background="#f7f7f7">
          <div class="card clearfix"  v-for=" list in listData" >
            <div class="span4 device left clearfix" v-on:click="goChart(list)">
              <!-- 起运地 -->
              <div class = "left iocnBox" >
                <!--运输状态-->
                <p class="go">{{languageData.id=='Chinese'?list.transportStatustextC:list.transportStatustextE}} </p>
                <!--运输图标-->
                <div class="iocn">
                  <img :src="list.icon">
                </div>
              </div>
              <div class = " left textBox" style="position: relative">
                <!--起点-->
                <div class=" ctiy ">{{languageData.id=='Chinese'?list.startPosition:list.startPositionEn}}</div>
                <!--终点-->
                <div class=" ctiy">{{languageData.id=='Chinese'?list.endPosition:list.endPositionEn}}</div>
                <!--当前地址-->
                <div class="text" >
                  <p class="goMap" style="cursor: pointer" @click.stop="gomap(list)"><i class="el-icon-location"></i> {{languageData.admin.current}}：{{list.now}}<i class="el-icon-arrow-right"></i></p>
                </div>
                <div class="iconMage">
                  <div class="bul"></div>
                  <div class="solid"></div>
                  <div class="red"></div>
                </div>
              </div>
              <div class = "cleae"> </div>
            </div>
            <div class="span3 device left  clearfix">
              <div class="textBox deviceT" style="position: relative">
                <!-- 柜号 -->
                <p ><label>{{list.transportType==1?languageData.public.plalteB:languageData.public.plalte}}：</label><span>{{list.containerId?list.containerId:"- - - - - - - - - - - - - - "}}</span>
                  <span class="copy" :data-clipboard-text="list.containerId" @click="copyFn($event)"> {{languageData.public.copy}} </span></p>
                <!-- 提单号 -->
                <p v-on:click="goChart(list)"><label>{{languageData.public.ladingIdBill}}：</label><span>{{list.ladingId?list.ladingId:"- - - - - - - - - - - -"}}</span></p>
                <!-- 设备号 -->
                <p v-on:click="goChart(list)"><label>{{languageData.public.container}}：</label><span>{{list.deviceId}}</span></p>

              </div>
            </div>
            <div class="span3 device left clearfix" v-on:click="goChart(list)"   :mapListData="mapListData">
              <div class="deviceStatus textBox deviceT">
                <!-- 柜号 -->
                <p><label>{{languageData.public.modeOfTransport}}： </label><span> {{languageData.id=='Chinese'?list.transportTypeText:list.transportTypeTextEn}} </span></p>
                <!-- 运输状态 -->
                <p><label>{{languageData.public.status}}： </label><span> {{languageData.id=='Chinese'?list.transportStatustextC:list.transportStatustextE}}  </span></p>
                <!-- 设备状态 -->
                <!--<p><label>{{languageData.public.deviceStatus}}： </label><span> {{languageData.id=='Chinese'?list.deviceOnfftext.CN:list.deviceOnfftext.EN}}  </span></p>-->
                <!---->
                <!-- 创建时间 -->
                <p><label>{{languageData.public.creaedTime}}： </label><span> {{list.ymd}} </span></p>
                <!-- 完成时间-->
                <p v-show="list.completeTime != 'null null'"><label >{{languageData.public.completionTime}}：  </label><span> {{list.completeTime}} </span></p>
              </div>
            </div>
            <div class="cleae"></div>
            <div class="timeDate">
              <!-- 年 -->
              <p class="year"> {{list.completeTimeY?list.completeTimeY:''}}</p>
              <!-- 今明天 -->
              <p class="data" v-show="list.dateText">{{list.dateText}}</p>
              <!-- 日期 -->
              <p class="data" v-show="!list.dateText"><span > {{list.completeTimeD}}</span>  <i class="month"> {{languageData.id=='Chinese'?list.completeTimeM:list.completeTimeMonthEN}} {{languageData.id=='Chinese'? languageData.public.month:''}}</i></p>
            </div>
            <div class="set">
              <div >
                <el-button round class="bot" :updateStatusData="updateStatusData" @click.stop="del(list.id)">{{languageData.public.Delete}}</el-button>
              </div>
            </div>
          </div>
          <div class="con" style="margin-top: 30px"><p style="font-size: 18px;color: #0d71b7">{{errorDate}}</p> </div>
        </div>
        <div style="text-align: right;width: 70%;min-width: 910px;max-width:1100px; padding-bottom: 40px;margin: auto" v-show="!errorDate">
          <el-pagination layout="prev, pager, next" :page-count="pages.cunt" v-show="pages.cunt>1" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
      <div class="botList">

      </div>
    </section>
    <section id="footer" style="text-align: right">
    </section>
  </div>
</template>
<style scoped>
  .sea{text-align: left;width: 1200px;min-width: 980px;max-width: 1500px;}
  #cent{background-color: #f7f7f7}
  .all{cursor: pointer}
  .ctiye{ max-height: 300px;overflow-y: scroll}
  .cityBox{cursor: pointer;font-size: 12px;}
  .noAddress{width: 100%;height: 30px;border-bottom: 1px solid #e1e1e1;margin-bottom:10px; }
  .Country{font-size:14px;font-weight: bold }
  .saech{ width:567px;margin: auto;padding-top:45px; }
  .saechIput{width: 480px;margin-right: 0px;position: relative;z-index: 10;border: 1px solid #fff;height: 26px;line-height:26px;padding: 6px}
  .saechBout{border-radius: 0px 4px 4px 0px;position: relative; left: -7px;z-index: 11;font-size: 14px;font-weight: bold;width: 67px;text-align: center}
  .saechBout:hover{background-color: #409eff;border-color: #409eff}
  .saechBout{background-color: #0e72b9; border-color: #0e72b9 }
  .saechBoutH{width: 100px;}
  .cardBox{width:70%;min-width: 915px;max-width:1100px;padding: 40px;margin: auto;position: relative;min-height: 400px;}
  .card{min-height: 140px;width: 100%;margin-top:20px;background-color: #fff;position: relative;cursor: pointer}
  .card:hover{box-shadow:0 0 16px #e2e7ea }
  .goMap:hover{box-shadow:0 0 16px #e2e7ea }
  .saechl { margin-bottom: 20px;height: 40px;text-align: center}
  .device p{ text-align: left;line-height: 34px;}
  .deviceStatus p{font-size: 12px;line-height: 28px;}
  .textBox{padding: 15px;margin: auto}
  .deviceT{width: 283px; }
  .address{ padding-left:30px;max-width:431px;min-width: 280px;margin-left: 0px;position: relative}
  .addresst{height:22px;margin: auto;border: 1px solid #b4bccc;border-radius: 4px 4px 4px 4px ;padding: 7px 10px;line-height: 22px;position: relative;min-width:224px;margin-left: 5px; text-align: left;background-color: #fff}
  .addresst:hover{border: 1px solid #409EFF}
  .down{width: 40px;height: 40px;display: block; font-size: 14px;text-align: center;position: absolute;top:0px;right: 0px;line-height: 40px;cursor: pointer}
  .addressChart{width:383px;height:26px;margin: auto;border: 1px solid #e1e1e1;border-radius: 0px 0px 8px 8px ;padding: 7px 10px;text-align:left;line-height: 25px; outline:none}
  .iocnBox .go{font-size: 12px;text-align: center ;width: 100%;line-height: 25px;color: #000}
  .ctiy{font-size:22px;font-weight: bold; text-align: left;line-height: 40px;padding-left:20px;}
  .iconBox{width:100px;line-height: 40px;border-bottom: 2px solid #e1e1e1;position: relative;padding-right: 5px;padding-left: 5px;margin: 0px 15px;top: -15px;}
  .iocn{width: 25px;height:25px;background: #e1e1e1;border-radius:16px; margin: auto}
  .iocn img { width: 100%;height: 100% }
  .l{width: 10px;height: 1px;border-bottom: 2px solid #e1e1e1;transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);position: absolute;right: -2px;bottom:1px;}
  #cent input{ border: 0px none}
  .address .text{padding-top:40px;width: 90%;max-width: 300px;}
  .address .text p{padding-left:20px;background-color: #e1f3ff;font-size: 14px;line-height: 28px;height: 28px;}
  .timeDate{position: absolute;left: -90px;top: -50px;}
  .timeDate p{text-align: left;line-height: 40px;font-size: 18px;}
  .month{font-size: 14px;margin-left: 5px;}
  #cent .timeDate .data{font-size: 18px;}
  .year {height: 40px;width:90px;}
  .set{width: 104px;height:100px;position: absolute;right: -134px;top: 20px;}
  .bot{width: 104px;height: 40px;margin-bottom: 20px;border: 1px solid #fff}
  .okBot{background-color: #0e72b9; border-color: #0e72b9 ;color: #fff}
  .okBot:hover{background-color: #409eff;border-color: #409eff}
  .copy{margin-left: 10px; ;padding: 5px 10px 5px 5px; border: 1px solid #ccc; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer}
  .iocnBox{ min-width:50px;height: 50px;background: #e2f3ff;padding: 10px;border-radius:8px;margin: 20px;margin-top:35px;  }
  .iconMage{ position: absolute ;left: 20px;top:30px;}
  .bul{ width: 5px;height: 5px;border-radius: 3px; border: 1px solid #b3e19d}
  .solid{ width: 3px;height: 40px; border-right: 1px solid #e1e1e1}
  .red{ width: 5px;height: 5px;border-radius: 3px; border: 1px solid red}
  .popover{width: 209px;margin-right: 10px; height: 30px;border: 1px solid #dcdfe6;transition: border-color .2s cubic-bezier(.645,.045,.355,1);padding: 5px 15px;    border-radius: 4px}
  .popover:focus{border: 1px solid #409eff;}
  .listCity span{margin: 0px 10px}
  .listCity p{padding: 10px 0px;cursor: pointer}
  .listCity p:hover{background: #e1e1e1}
  @media only screen and (min-width: 300px){
    .cardBox{margin-left:100px;}
  }
  @media only screen and (min-width: 1200px){
    .cardBox{width:80%;min-width: 920px;max-width:1100px;padding: 40px;min-height: 400px;margin:0px auto;}
  }
</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import Clipboard from 'clipboard'
  import Public from '../../vuex/public.js'
  import jsonListData from '../../../static/local.json'
  import {mapState, mapActions} from 'vuex'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import IconCarNor from '../../../static/img/icon/icon_car@2x.png'
  import IconCarSel from '../../../static/img/icon/icon_car_sel.png'
  import IconPlantNor from '../../../static/img/icon/icon_plane@2x.png'
  import IconPlantSel from '../../../static/img/icon/icon_plant_sel.png'
  import IconShipNor from '../../../static/img/icon/icon_ship@2x.png'
  import IconShipSel from '../../../static/img/icon/icon_ship_sel.png'
  import IconTrainNor from '../../../static/img/icon/icon_train@2x.png'
  import IconTrainSel from '../../../static/img/icon/icon_train_sel.png'
  export default {
    name: 'my-Chart',
    created () {
      // 查看本页面路由 绑定对应页面class
      var usr = sessionStorage.getItem('user')
      if(usr) {
        usr = JSON.parse(usr)
        this.user = usr
      }
    },
    data () {
      return {
        errorDate:null,
        user: null,
        showSaech: false,
        input: null,
        startTime: null,
        year: null,
        //
        list: [
          {
            id: 'AKDFAKJ2', // 柜号/车牌号
            startPosition: { // 起始地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            endPosition: { // 目的地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            transportStatus: 1, // 运输状态
            transportType: 2 // 运输类型
          },
          {
            id: 'AKDFAKJ2',
            startPosition: {
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            endPosition: {
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            transportStatus: 1,
            transportType: 2
          }
        ],
        // 渲染列表
        listData: [
//          {
//            id: 'AQS477254577',  // 柜号/车牌号
//            ladingId: 'AQS477254577', // 提货号
//            deviceId: 'AQS472547547', // 设备id
//            startPosition: '北京', // 起始地
//            endPosition: '圣地哥呀', // 目的地
//            transportStatus: 1, // 运输状态
//            transportType: 1, // 运输类型
//            deviceStatus: 0, // 设备状态
//            caretTime: null, // 创建时间
//            year: null, // 年
//            month: null, // 月
//            data: null, // 日
//            dateText: null, // 今天/昨天
//            now: '深圳南山码头', // 当前位置
//            transportTypeText: '飞机', // 运输渲染
//            icon: null // 图标
//          }
        ],
        loading: false,
        countryData: [{
          country: {
            id: null,
            CN: null,
            EN: null,
            province: [{
              id: null,
              CN: null,
              EN: null,
              city: [{
                id: null,
                CN: null,
                EN: null
              }]
            }]
          }
        }],
        visible1: false,
        visible2: false,
        cityText: {
          EN: 'Departure',
          CN: '起运地',
          bol: true
        },
        cityTextEnd: {
          EN: 'Desitnation',
          CN: '目的地',
          bol: true
        },
        time: '',
        form: {
          startDate: null,
          startDate: null,
          startPosition: '',
          endPosition:  '',
          endPositionCode:"",
          startPositionCode:'',
          transportType: [0],
          transportStatus: -1,
          page: '',
          pageCount: ''
        },
        transportTypelist: [{
          value: 0,
          label: '火车',
          label2: 'Train'
        }, {
          value: 1,
          label: '汽车',
          label2: 'Motor'
        }
//        ,{
//          value: 2,
//          label: '轮船',
//          label2: 'Freighter'
//        }, {
//          value: 3,
//          label: '飞机',
//          label2: 'Flight'
//        }
        ],
        transportStatuslist: [{
            value: -1,
            label: '全部状态',
            label2: 'All transport'
        },
          {
          value: 0,
          label: '运输中',
          label2: 'In transit'
        }, {
          value: 1,
          label: '运输完成',
          label2: 'Finished'
        }],
        pages: {
          page: 1,
          pageSize: 10,
          cunt: null
        },
        listCity:[]
      }
    },
    methods: {
      ...mapActions({
        transportListpost: 'history',
        updateTansportStatuspost: 'updateTansportStatus',
        delPost: 'deletefn',
        checkID: 'checkNumber',
        mapListFn: 'mapListFn',
        getCityList: 'getCityList',
        transportListpostH: 'searchList'
      }),
      changeFn (text,a) {

        this.listCity=[]
        if(text.length != this.len){
          this.len = text.length
          var dat = Public.publicLo.getCity(text)
          this.listCity = dat;

        }
      },
      clickgetcity(text,a){

        if (a==1){
          this.form.startPosition = text.countryCN+' -- '+ text.cityCN+ ' -- '+text.stationCN+'('+text.code+') -- '+text.stationEN
          this.form.startPositionCode = text.id;
          this.visible1 = false
        }
        if (a==2){
          this.form.endPosition = text.countryCN+' -- '+ text.cityCN+  ' -- '+text.stationCN+'('+text.code+') -- '+text.stationEN
          this.form.endPositionCode = text.id;
          this.visible2 = false
        }

      },
      // 分页查询
      handleCurrentChange (val) {
        this.pages.page = parseInt(val)
        if (this.input) {
          this.saechFn(true)
        } else {
          // 区分 高级搜索和基础搜索
          if (this.showSaech) {
            this.sechH(true)
          } else {
            this.saechList(true)
          }
        }
      },
      // 清空城市
      allCity (a) {
        if(a == 1){
          this.form.startPosition= {country: '', state: '', city: ''}
          this.cityText= {
            EN: 'All citys',
            CN: '不限城市',
            bol: true
          }
          this.visible1 = false
        }
        if (a == 2) {
          this.form.endPosition= {country: '', state: '', city: ''}
          this.cityTextEnd = {
            EN: 'All citys',
            CN: '不限城市',
            bol: true
          }
          this.visible2 = false
        }
      },
      // 列表查询
      saechList (a) {
        this.loading = true
        var parm = {
          code: this.input,
          page: a ? this.pages.page : 1,
          pageSize: this.pages.pageSize
        }
        this.transportListpost(parm)
      },
      // 查询按钮
      saechFn (a) {
        this.loading = true
        this.pages.page = 1
        this.saechList()
      },
      //
      sechC(){
        this.showSaech = !this.showSaech
        this.form =  {
          startDate: null,
          endDate: null,
          startPosition: '',
          endPosition: '',
          transportType: [0],
          transportStatus: -1,
          page: this.form.page,
          pageCount: this.form.pageCount
        }
      },
      // 列表解析
      listFn (res) {
        // 重置列表
        this.listData = []
        this.loading = false
        if(res.code){
           if(res.code==1){
             this.errorDate = this.languageData.id=='Chinese'?'暂无此类订单': 'No such data'
           }
          if(res.code ==-1){
            this.errorDate = this.languageData.id=='Chinese'?'数据请求异常，请稍后重试': 'Request error Please try again later'
          }
          return
        }else {
          this.errorDate = null
        }
        // 计算分页
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.pages.cunt = Math.ceil(cunt / this.pages.pageSize)
        }
        var res = res.body.data
        var listData = []
        for (let i in res) {
          // 提单号 ，运输状态描述，时间创建解析，今天/明天
          var ladingId, transportTypeText, time, dateText,completeTime
          // 时间创建解析
          if (res[i].createTime && res[i].createTime!=-1) {
            time = Public.publicLo.timeCheng(res[i].createTime)
          } else {
            time = {ymd: null, hms: null, times: null, s: null, d: null, m: null, md: null, week: null, y: null}
          }
          if (res[i].completeTime && res[i].completeTime!=-1) {
            completeTime = Public.publicLo.timeCheng(res[i].completeTime)
          } else {
            completeTime = {ymd: null, hms: null, times: null, s: null, d: null, m: null, md: null, week: null, y: null}
          }
          // 当前时间
          var now = Public.publicLo.dataChange()
          // 匹配当前日期 和当前日期一样 赋值今天
          if ((now.y + now.m) == (completeTime.y + completeTime.m)) { // 匹配当前 年月
            var date1 = parseInt(now.d),
              date2 = parseInt(completeTime.d)
            if (date1 == date2) { // 匹配当前日期
              dateText = this.languageData.id=='Chinese'?'今天':'Today'
            } else if ((date1 - date2) == 1) {
              dateText = this.languageData.id=='Chinese'? '昨天':'Yesterday'
            }else {
              dateText = ''
            }
          }else {
            dateText = ''
          }
          // 解析运输状态 拼接字符串
          transportTypeText = this.ransportSwitch(res[i].transportType)
          var strdata = Public.publicLo.postCity(res[i].startPosition)
          var endata = Public.publicLo.postCity(res[i].endPosition)
          // var list = res[i].startPosition.city.split('_')
          // var list2 =  res[i].endPosition.city.split('_')
          // res[i].startPosition.state = res[i].startPosition.country +  '_' + list[1]
          // res[i].endPosition.state = res[i].endPosition.country +  '_' + list2[1]
          // var strdata = jsonListData[res[i].startPosition.country][res[i].startPosition.state][res[i].startPosition.city]
          // var endata = jsonListData[res[i].endPosition.country][res[i].endPosition.state][res[i].endPosition.city]
          var deviceOnfftext
          if (!strdata) {
            strdata = {
              cityCN: "NO DAT",
              cityEn: "NO DAT",
              cityPY: "NO DAT",
              citySX: "NO DAT",
              code: "NO DAT",
              countryCN: "NO DAT",
              coutntryEN: "NO DAT",
              id: "NO DAT",
              stationCN: "NO DAT",
              stationEN: "NO DAT",
            }
          }
          if (!endata) {
            endata = {
              cityCN: "NO DAT",
              cityEn: "NO DAT",
              cityPY: "NO DAT",
              citySX: "NO DAT",
              code: "NO DAT",
              countryCN: "NO DAT",
              coutntryEN: "NO DAT",
              id: "NO DAT",
              stationCN: "NO DAT",
              stationEN: "NO DAT",
            }
          }
          // 解析设备状态
          if(res[i].deviceOnff && res[i].deviceOnff==1){
            deviceOnfftext =  {EN:'Online',CN:'在线'}
          } else {
            if (res[i].deviceOnff == 0) {
              deviceOnfftext = {EN:'Offline',CN:'离线'}
            }else {
              deviceOnfftext =  {EN:'sleep',CN:'休眠'}
            }
          }
          if (res[i].newAddress) {
            if (res[i].newAddress.length >9) {
              res[i].newAddress = res[i].newAddress.substring(0, 8) + '...'
            }
          } else {
            res[i].newAddress = '未请求到数据'
            if(this.languageData.id == 'English'){
              res[i].newAddress = 'No Data'
            }
          }
          var transportStatustext = {EN:'',CN:''}
          if(res[i].transportStatus==0){
            transportStatustext = {EN:'In transit',CN:'运输中'}
          }
          if(res[i].transportStatus == 1){
            transportStatustext = {EN:'Finished',CN:'运输完成'}
          }
          // 数据拼接
          time.m = parseInt(time.m)

          var billNumber = res[i].billNumber,billNumberData ='',billNumberObj=[];
          if(billNumber){
            billNumber = billNumber.split(',')
            for(let i in billNumber){
              if(billNumber[i]){
                billNumberObj.push(billNumber[i])
              }
            }

            for(let i in billNumberObj){

              if(i == billNumberObj.length-1 && billNumberObj[i]){
                billNumberData +=  billNumberObj[i]
              }else if(billNumberObj[i]){
                billNumberData +=  billNumberObj[i] + ' /  '
              }
            }
            if(billNumberData.length>15){
              billNumberData.substr(1,15)+'...'
            }
          }

          var list = {
            id: res[i].id,  // 后台唯一id
            containerId: res[i].containerId, // 柜号/车牌号
            ladingId: billNumberData, // 提货号
            deviceId: res[i].deviceNumber, // 设备id
            deviceOnff: res[i].deviceOnff,
            deviceOnfftext: deviceOnfftext,
            startPosition: strdata.cityCN, // 起始地
            endPosition: endata.cityCN, // 目的地
            startPositionEn: strdata.cityEn, // 起始地英文
            endPositionEn: endata.stationEN, // 目的地英文
            transportStatus: res[i].transportStatus, // 运输状态
            transportType: res[i].transportType, // 运输类型
            deviceStatus: 0, // 设备状态
            time: time.hms, // 创建时间
            year: parseInt(time.y), // 年
            month: time.m, // 月
            monthEN: time.m ==1? 'Jan':time.m ==2? 'Feb':time.m ==3? 'Mar':time.m ==4? 'Apr':time.m ==5? 'May':time.m ==6? 'Jun':time.m ==7? 'jul':time.m ==8? 'Aug':time.m ==9? 'Sep':time.m ==10? 'Oct':time.m ==11? 'Nov':'Dec', // 月
            data: time.d, // 日
            dateText: dateText, // 今天/昨天
            transportStatustextC: transportStatustext.CN,
            transportStatustextE: transportStatustext.EN,
            transportTypeText: transportTypeText.type,
            transportTypeTextEn: transportTypeText.typeEn,
            icon: transportTypeText.icon,
            now: res[i].newAddress, // 当前位置
            ymd: time.ymd + ' ' + time.hms,
            completeTime: completeTime.ymd + ' ' + completeTime.hms,
            completeTimeY: parseInt(completeTime.y),
            completeTimeMonthEN: completeTime.m ==1? 'Jan':completeTime.m ==2? 'Feb':completeTime.m ==3? 'Mar':completeTime.m ==4? 'Apr':completeTime.m ==5? 'May':completeTime.m ==6? 'Jun':completeTime.m ==7? 'jul':completeTime.m ==8? 'Aug':completeTime.m ==9? 'Sep':completeTime.m ==10? 'Oct':completeTime.m ==11? 'Nov':'Dec', // 月
            completeTimeM: parseInt(completeTime.m)|| time.m, // 月
            completeTimeD: completeTime.d || time.d, // 日
          }
          if (list.startPosition.length > 5) {
            list.startPosition = list.startPosition.substring(0, 4) + '...'
          }
          if (list.endPosition.length > 4) {
            list.endPosition = list.endPosition.substring(0, 4) + '...'
          }
          if (list.startPositionEn.length > 9) {
            list.startPositionEn = list.startPositionEn.substring(0, 7) + '...'
          }
          if (list.endPositionEn.length > 9) {
            list.endPositionEn = list.endPositionEn.substring(0, 7) + '...'
          }
          if (i == 0) {
            this.completeTimeY = list.completeTimeY
          } else {
            if (this.completeTimeY == list.completeTimeY) {
              list.completeTimeY = ''
            }
          }
          listData.push(list)
          dateText = null
        }
        this.listData = listData
      },
      // 解析运输方式
      ransportSwitch (data) {
        var transportTypeText
        switch (data) {
          case 0:
            transportTypeText = {type: '火车', icon: IconTrainNor, typeEn: 'Train'}
            break
          case 1:
            transportTypeText = {type: '汽车', icon: IconCarNor, typeEn: 'Motor'}
            break
          case 2:
            transportTypeText = {type: '飞机', icon: IconPlantNor, typeEn: 'Flight'}
            break
          case 3:
            transportTypeText = {type: '轮船', icon: IconShipNor, typeEn: 'Freighter'}
            break
          default:
            transportTypeText = { type: '异常', icon: IconCarNor }
            break
        }
        return transportTypeText
      },
      // 运输完成
      updatStatusFn (id) {
        var parm = {
          id: JSON.stringify(id),
          transportStatus: '1' // 0：运输中 1：运输完成 2：运输异常
        }
        this.updateTansportStatuspost(parm)
      },
      // 删除运输列表
      del (id) {
        this.loading = true
        var parm = {
          id: JSON.stringify(id)
        }
        this.delPost(parm)
      },
      // 运输列表操作
      listStatus (res) {
        var text = res.message
        if (res.status == 0) {
          // 修改成功
          if(res.code == 'del'){text = this.languageData.id=='Chinese'?'订单删除成功': 'Delete successfully' }
          if(res.code == 'up'){text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully' }
          this.openSuccess(text)
          if (this.input) {
            this.saechFn()
          } else {
            this.saechList()
          }
        }
        if (res.status != 0) {
          // 修改成功 修改失败
          this.openError(res.message)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 跳转地图
      gomap (list) {
        // 清空 vuex 列表
        this.$store.commit('addMapList', null)
        this.$store.commit('shechDat', null)
        this.$router.push({name: 'map', query: {id: list.id}})
        return false
      },
      // 查看详情
      goChart (list) {
        this.$router.push({name: 'chartSon', query: {id: list.id}})
      },
      // 高级搜索
      sechH (a) {
        var startDate = '', endDate = ''
        var  parm = {
          page: a ? this.pages.page : 1,
          pageSize: this.pages.pageSize
        }
        if (this.form.startDate) {
          startDate = Public.publicLo.dataChange(this.form.startDate[0])
          startDate = startDate.time
          endDate = Public.publicLo.dataChange(this.form.startDate[1])
          endDate = endDate.time
          parm.startDate = startDate
          parm.startDate = endDate
        }
        if (this.form.startPositionCode) {
          parm.startPosition = this.form.startPositionCode
        }
        if (this.form.endPositionCode) {
          parm.endPosition = this.form.endPositionCode
        }
        if (this.form.transportType.length > 0) {
          parm.transportType = JSON.stringify(this.form.transportType)
        }
        if (this.form.transportStatus == -1) {

        }else {
          parm.transportStatus = this.form.transportStatus
        }
        this.transportListpostH(parm)
      },
      // 支持的城市列表
      cityListFn (res) {
        res = res.data
        var cityData = []
        for (let i in res) {
          // 拉取本地地址世界地址jsom
          var DATA = jsonListData
          // 申明单次循环地址
          var address = {
            country: {CN: '', id: '', EN: ''},
            province: {CN: '', id: '', EN: ''},
            city: {CN: '', id: '', EN: ''}
          }
          // 切割地址 分离国家城市
          var list = res[i].split('_')
          // 注入国家id
          address.country.id = list[0]
          address.country.CN = DATA[address.country.id].CN
          address.country.EN = DATA[address.country.id].EN
          if (list) {
            // 注入省份id
            address.province.id = address.country.id + '_' + list[1]
            address.province.CN = DATA[address.country.id][address.province.id].CN
            address.province.EN = DATA[address.country.id][address.province.id].EN
            // 注入城市id
            address.city.id = address.province.id + '_' + list[2]
            address.city.CN = DATA[address.country.id][address.province.id][address.city.id].CN
            address.city.EN = DATA[address.country.id][address.province.id][address.city.id].EN
          }
          cityData.push(address)
        }
        // 国家去重
        var result = [], result2 = [], hash = {};
        // 提出所有国家 和 重复的国家
        for (var i = 0; i < cityData.length; i++) {
          var elem = cityData[i].country.id
          if (!hash[elem]) {
            result.push({
              country: {
                id: cityData[i].country.id,
                CN: cityData[i].country.CN,
                EN: cityData[i].country.EN,
                province: [{
                  id: cityData[i].province.id,
                  CN: cityData[i].province.CN,
                  EN: cityData[i].province.EN,
                  city: [{
                    id: cityData[i].city.id,
                    CN: cityData[i].city.CN,
                    EN: cityData[i].city.EN
                  }]
                }]
              }
            })
            hash[elem] = true
          } else {
            result2.push({
              pid: cityData[i].country.id,
              id: cityData[i].province.id,
              CN: cityData[i].province.CN,
              EN: cityData[i].province.EN,
              city: [{
                id: cityData[i].city.id,
                CN: cityData[i].city.CN,
                EN: cityData[i].city.EN
              }]})
          }
        }
        // 组装 城市列表
        for (let i in result2) {
          for (let k in result) {
            var bol1 = true
            if (result2[i].pid == result[k].country.id){
              for (let s in result[k].country.province){
                if (result2[i].id == result[k].country.province[s].id){
                  var da = result[k].country.province[s].city
                  var da2 = result2[i].city
                  var dat3 = da.concat(da2)
                  bol1 = false
                  result[k].country.province[s].city = dat3
                }
              }
              if(bol1){
                result[k].country.province.push(result2[i])
              }
            }
          }
        }
        this.countryData = result
      },
      clickCity (a, list, EN, CN, en, cn, country) {
        // 市

        if (a == 1) {
          this.form.startPosition.city = list.id
          var cityL = this.form.startPosition.city.split('_')
          this.cityText = {
            EN: EN + '/' + list.EN,
            CN: CN + '/' + list.CN
          }
          if (en && cn) {
            this.cityText = {
              EN: EN + '/' + en + '/' + list.EN,
              CN: CN + '/' + cn + '/' + list.CN
            }
          }
          // 国家
          this.form.startPosition.country = cityL[0]
          // 省 州
          this.form.startPosition.state = cityL[0] + '_' + cityL[1]
          this.cityText.bol = false
          this.visible1 = false
        }
        if (a == 2) {
          this.form.endPosition.city = list.id
          var cityL = this.form.endPosition.city.split('_')
          this.cityTextEnd = {
            EN: EN + '/' + list.EN,
            CN: CN + '/' + list.CN
          }
          if (en) {
            this.cityTextEnd = {
              EN: EN + '/' + en + '/' + list.EN,
              CN: CN + '/' + cn + '/' + list.CN
            }
          }
          // 国家
          this.form.endPosition.country = cityL[0]
          // 省 州
          this.form.endPosition.state = cityL[0] + '_' + cityL[1]
          this.cityTextEnd.bol = false
          this.visible2 = false
        }
      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      copyFn (event) {
        const clipboard = new Clipboard('.copy');
        var text = this.languageData.id=='Chinese'?'复制成功':"copy success"
        this.openSuccess(text)
      },
    },
    computed: {
      transport: function () {
        var parm = this.transportList
        if (parm) {
          if(parm.body){
            this.listFn(parm)
          }
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      mapListData: function () {
        var parm = this.mapList
        if (parm) {
        }
        return 1
      },
      cityList: function () {
        var parm = ""
        if (parm) {
          this.cityListFn(parm.body)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'transportList',
        'updateStatus',
        'language',
        'mapList',
        'cityListData'
      ])
    },
    mounted () {
      var par = {
        company: this.user.companyName,
      }
      this.getCityList(par)
      // 配置顶部菜单
      this.saechList()
    },
    components: {
      ElButton,
      HeaderPublc
    }
  }
</script>

